<template>
  <Modal v-model="show"  title="绑定菜单">
  <Transfer
      :data="data"
      :target-keys="targetKeys"
      :list-style="listStyle"
      :titles="['未分配菜单', '已分配菜单']"
      filterable
      :filter-method="filterMethod"
      @on-change="handleChange"></Transfer>

    <template #footer>
      <Button style="margin-right: 8px" @click="show = false">关闭</Button>
      <Button type="primary" @click="handleSave">保存</Button>
    </template>
  </Modal>
</template>
<script>
export default {
  props: {
     sysId: {type: Number , required: true},
     modelValue: {type: Boolean, required: true}
  },
  data () {
    return {
      data: [],
      targetKeys: [],
      listStyle: {
        height: '500px',
      }
    }
  },
  watch: {
    sysId: function(newVal) {
      this.querySysList(newVal);
    }
  },
  methods: {
    querySysList(sysId) {
       this.$api.querySysBindMenuList(sysId).then(ret=> {
          if (ret.data.status) {
            let list = ret.data.list ;
            this.data = list.map(d => ({ key: d.id , label: d.menuName, disabled: !d.state}))
            this.targetKeys = list.filter(d => d.bind).map(d => d.id);
          }
       })
    },
    handleChange (newTargetKeys) {
      this.targetKeys = newTargetKeys;
    },
    filterMethod (data, query) {
      return data.label.indexOf(query) > -1;
    },
    handleSave() {
      // 获取选中的所有菜单 ， 并进行绑定
      this.$api.bindMenusBySysId(this.sysId, this.targetKeys).then(ret=> {
         if (ret.data.status) {
           this.$tips.success("绑定菜单操作成功") ;
           this.show = false;
         }
      })
    }
  },
  emits: ["update:model-value"],
  computed: {
    show: {
      set(val) {
        this.$emit("update:model-value", val);
      },
      get() {
        return this.modelValue ;
      }
    }
  }
}
</script>

<style>
.ivu-transfer {
  text-align: center;
}
.ivu-transfer-list-footer {
  border: none;
}

.ivu-transfer-list-content {
  text-align: left;
}
</style>
